<template>
  <view v-if="template">
    <s-layout
      title="亲友录"
      tabbar="/pages/message/follow"
      navbar="inner"
      color="#000000"
      onShareAppMessage
      :leftIcon="''"
      :bgStyle="template.style?.background"
      :navbarStyle="template.style?.navbar"
      :showFloatButton="true"
      :showLeftHome="false"
      showAddIcon
      main-background="#F5F5F5"
    >
      <scroll-view scroll-y
                   :style="{
                  height: `calc(100vh - ${scrollView_height}px)`
                 }"
      >
        <uni-collapse class="collapse"
                      accordion
        >
          <view class="flex flex-column align-center" v-if="familyFriends.length > 0"
                v-for="(item,index) in familyFriends" :key="index">
            <view :style="{ height:'10rpx' }"></view>
            <uni-collapse-item :open="false"
                               class="collapseItem"
                               title-border="none"
                               show-animation
            >
              <template #title>
                <view class="item_header flex flex-row align-center">
                  <image :src="getListImage(4)"></image>
                  <view class="right" style="margin-left: 22rpx;">
                    <view class="name">
                      {{ item.name }} ({{ item.count }})
                    </view>
                  </view>
                </view>
              </template>
              <view class="flex flex-column align-center" v-if="item.users.length > 0">
                <view class="chat_list flex flex-column align-center"
                      v-for="(item1,index1) in item.users" :key="index1">
                  <view v-if="!!item1" class="list flex flex-row justify-between" @click.stop="goToChat(item1,'user')">
                    <view class="left w-100 flex flex-row align-center">
                      <view class="icon" v-if="!!item1.avatar">
                        <su-avatar
                          :src="item1.avatar.indexOf('http') != -1 ? item1.avatar : `${nc_image}${item1.avatar}`"
                          :avatarStyle="setAvatarStyle(60,60)" :image-style="setAvatarImageStyle(60,60)"
                          :showBorder="true"></su-avatar>
                      </view>
                      <view class="w-100" style="width:615rpx;margin-left: 25rpx;">
                        <view class=" flex flex-row align-center w-100 justify-between">
                          <view class=" flex flex-column align-start">
                            <view class="name">
                              {{ item1.nickname }}
                            </view>
                            <view class="code w-100" style="margin-top: 4rpx;">
                              拾亲号: {{ item1.uid }}
                            </view>
                          </view>
                          <view class="icon_left flex flex-row align-center justify-center">
                            <image :src="`${nc_image_path}/nc_chat.png`"></image>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </uni-collapse-item>
          </view>
          <view class="flex flex-column align-center" v-else
                v-for="(item,index) in page.no_family"
          >
            <view :style="{ height:'10rpx' }"></view>
            <uni-collapse-item :open="false"
                               class="collapseItem"
                               title-border="none"
                               show-animation
            >
              <template #title>
                <view class="item_header flex flex-row align-center">
                  <image :src="getListImage(4)"></image>
                  <view class="right" style="margin-left: 22rpx;">
                    <view class="name">
                      {{ item.name }} ({{ item.count || 0 }})
                    </view>
                  </view>
                </view>
              </template>
              <view class="flex flex-column align-center" v-if="item.users.length > 0">
                <view class="chat_list flex flex-column align-center"
                      v-for="(item1,index1) in item.users" :key="index1">
                  <view class="list flex flex-row justify-between" @click.stop="goToChat(item1,'user')">
                    <view class="left w-100 flex flex-row align-center">
                      <view class="icon" v-if="!!item1.avatar">
                        <su-avatar
                          :src="item1.avatar.indexOf('http')!= -1 ? item1.avatar : `${nc_image}${item1.avatar}`"
                          :avatarStyle="setAvatarStyle(60,60)" :image-style="setAvatarImageStyle(60,60)"
                          :showBorder="true"></su-avatar>
                      </view>
                      <view class="w-100" style="width:615rpx;margin-left: 25rpx;">
                        <view class=" flex flex-row align-center w-100 justify-between">
                          <view class=" flex flex-column align-start">
                            <view class="name">
                              {{ item1.nickname }}
                            </view>
                            <view class="code w-100" style="margin-top: 4rpx;">
                              拾亲号: {{ item1.uid }}
                            </view>
                          </view>
                          <view class="icon_left flex flex-row align-center justify-center">
                            <image :src="`${nc_image_path}/nc_chat.png`"></image>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </uni-collapse-item>
          </view>
          <view class="flex flex-column align-center" v-if="genealogyFriends.length > 0"
                v-for="(item,index) in genealogyFriends" :key="index">
            <view :style="{ height:'10rpx' }"></view>
            <uni-collapse-item :open="false"
                               class="collapseItem"
                               title-border="none"
                               show-animation
            >
              <template #title>
                <view class="item_header flex flex-row align-center">
                  <image :src="getListImage(3)"></image>
                  <view class="right" style="margin-left: 22rpx;">
                    <view class="name">
                      {{ item.name }} ({{ item.count }})
                    </view>
                  </view>
                </view>
              </template>
              <view class="flex flex-column align-center" v-if="item.users.length > 0">
                <view class="chat_list flex flex-column align-center"
                      v-for="(item1,index1) in item.users" :key="index1">
                  <view v-if="!!item1" class="list flex flex-row justify-between" @click.stop="goToChat(item1,'user')">
                    <view class="left w-100 flex flex-row align-center">
                      <view class="icon" v-if="!!item1.avatar">
                        <su-avatar
                          :src="item1.avatar.indexOf('http')!= -1 ? item1.avatar : `${nc_image}${item1.avatar}`"
                          :avatarStyle="setAvatarStyle(60,60)" :image-style="setAvatarImageStyle(60,60)"
                          :showBorder="true"></su-avatar>
                      </view>
                      <view class="w-100" style="width:615rpx;margin-left: 25rpx;">
                        <view class=" flex flex-row align-center w-100 justify-between">
                          <view class=" flex flex-column align-start">
                            <view class="name">
                              {{ item1.nickname }}
                            </view>
                            <view class="code w-100" style="margin-top: 4rpx;">
                              拾亲号: {{ item1.uid }}
                            </view>
                          </view>
                          <view class="icon_left flex flex-row align-center justify-center">
                            <image :src="`${nc_image_path}/nc_chat.png`"></image>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </uni-collapse-item>
          </view>
          <view class="flex flex-column align-center">
            <view :style="{ height:'10rpx' }"></view>
            <uni-collapse-item :open="false"
                               class="collapseItem"
                               title-border="none" :show-animation="true"
            >
              <template #title>
                <view class="item_header flex flex-row align-center">
                  <image :src="getListImage(1)"></image>
                  <view class="right" style="margin-left: 22rpx;">
                    <view class="name">
                      我关注的小助手 ({{ chat_message_list.length }})
                    </view>
                  </view>
                </view>
              </template>
              <view class="flex flex-column align-center" v-if="chat_message_list.length > 0">
                <view class="chat_list flex flex-column align-center"
                      v-for="(item,index) in chat_message_list" :key="index">
                  <view class="list flex flex-row justify-between" @click.stop="goToChat(item,'AI')">
                    <view class="left w-100 flex flex-row align-center">
                      <view class="icon">
                        <su-avatar :src="!!item ? item.avatar.replace(/^\s+|\s+$/g, '') : ''"
                                   :avatarStyle="setAvatarStyle(60,60)" :image-style="setAvatarImageStyle(60,60)"
                                   :showBorder="true"></su-avatar>
                      </view>
                      <view class="w-100" style="width:615rpx;margin-left: 25rpx;">
                        <view class=" flex flex-row align-center w-100 justify-between">
                          <view class=" flex flex-column align-start">
                            <view class="name">
                              {{ item.nickname }}
                            </view>
                            <view class="code w-100" style="margin-top: 4rpx;">
                              {{
                                !!!!item.bot && !!item.bot.description ? item.bot.description : `我是您的${item.nickname}小帮手!`
                              }}
                            </view>
                          </view>
                          <view class="icon_left flex flex-row align-center justify-center">
                            <image :src="`${nc_image_path}/nc_chat.png`"></image>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </uni-collapse-item>
          </view>
          <view class="flex flex-column align-center">
            <view :style="{ height:'10rpx' }"></view>
            <uni-collapse-item :open="collager.open"
                               class="collapseItem"
                               title-border="none"
                               show-animation
            >
              <template #title>
                <view class="item_header flex flex-row align-center">
                  <image :src="getListImage(2)"></image>
                  <view class="right" style="margin-left: 22rpx;">
                    <view class="name">
                      我的朋友 ({{ friends.list.length }})
                    </view>
                  </view>
                </view>
              </template>
              <view class="flex flex-column align-center" v-if="friends.list.length > 0">
                <view class="chat_list flex flex-column align-center"
                      v-for="(item1,index1) in friends.list" :key="index1">
                  <view v-if="!!item1" class="list flex flex-row justify-between" @click.stop="goToChat(item1,'user')">
                    <view class="left w-100 flex flex-row align-center">
                      <view class="icon" v-if="!!item1.avatar">
                        <su-avatar
                          :src="item1.avatar.indexOf('http')!= -1 ? item1.avatar : `${nc_image}${item1.avatar}`"
                          :avatarStyle="setAvatarStyle(60,60)" :image-style="setAvatarImageStyle(60,60)"
                          :showBorder="true"></su-avatar>
                      </view>
                      <view class="w-100" style="width:615rpx;margin-left: 25rpx;">
                        <view class=" flex flex-row align-center w-100 justify-between">
                          <view class=" flex flex-column align-start">
                            <view class="name">
                              {{ item1.nickname }}
                            </view>
                            <view class="code w-100" style="margin-top: 4rpx;">
                              拾亲号: {{ item1.uid }}
                            </view>
                          </view>
                          <view class="icon_left flex flex-row align-center justify-center">
                            <image :src="`${nc_image_path}/nc_chat.png`"></image>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </uni-collapse-item>
          </view>
        </uni-collapse>
      </scroll-view>
      <s-login-popup ref="loginPopup" @confirm="loginConfirm"></s-login-popup>
    </s-layout>
  </view>
</template>

<script setup>
  import { computed, nextTick, onMounted, reactive, ref } from 'vue';
  import { onLoad, onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import SuAvatar from '@/sheep/ui/su-avatar/su-avatar.vue';
  import UniCollapse from '@/uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue';
  import UniCollapseItem from '@/uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue';

  const setAvatarStyle = (w, h) => {
    return {
      width: w + 'rpx',
      height: h + 'rpx',
      borderRadius: '50%',
    };
  };
  const scrollView_height = computed(() => {
    let height = 0;
    height = Number(sheep.$platform.device.statusBarHeight) + Number(sheep.$store('system_info').tabbar_height) + 44;
    return height;
  });

  const setAvatarImageStyle = (w, h) => {
    return {
      width: w + 'rpx',
    };
  };

  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {
    },
  });

  const template = computed(() => sheep.$store('app').template?.home);
  const chat_message_list = computed(() => sheep.$store('AI').all_follow_list);
  const nc_image_path = computed(() => sheep.$store('AI').nc_image_path);
  const sq_image_path = computed(() => sheep.$store('AI').sq_image_path);
  const nc_image = computed(() => sheep.$store('AI').nc_image);
  const isLogin = computed(() => sheep.$store('user').isLogin);
  const genealogyFriends = computed(() => sheep.$store('AI').genealogyFriends);
  const familyFriends = computed(() => sheep.$store('AI').familyFriends);
  const friends = computed(() => sheep.$store('AI').friends);
  const mp_code = computed(() => sheep.$store('AI').mp_code);
  const appVersion = computed(() => sheep.$store('app').info.worship_version);
  // #ifdef H5
  const userInfo = computed(() => JSON.parse(uni.getStorageSync('user-store')).userInfo);
  // #endif
  // #ifndef H5
  const userInfo = computed(() => sheep.$store('user').userInfo);
  // #endif
  const collager = reactive({
    open: false,
  });
  const getListImage = (type) => {
    switch (type) {
      case 1:
        return `${nc_image_path.value}/nc_ai_icon.png`;
      case 2:
        return `${sq_image_path.value}/index/tongxunlu_icon_pengyou.png`;
      case 3:
        return `${sq_image_path.value}/index/tongxunlu_icon_jiapu.png`;
      case 4:
        return `${sq_image_path.value}/index/tongxunlu_icon_jiating.png`;
    }
  };
  const page = reactive({
    // 未登陆的家庭
    no_family: [],
    no_genealogy: [],
  });
  const loginPopup = ref();

  onShow(async () => {
    if (!isLogin.value) {
      sheep.$store('user').updateUserData();
      const { data } = await sheep.$api.family.getNoLoginFamily();
      page.no_family = data.familys;
      const res = await sheep.$api.genealogy.getNoLoginGenealogy();
      page.no_genealogy.push(res.data);
    } else {
      if (!userInfo.value.surname || !userInfo.value.daimyo) {
        uni.redirectTo({
          url: '/pages/userData/sex',
        });
        return;
      }
      await sheep.$store('AI').setUserFamily();
    }
    collager.open = false;
    nextTick(() => {
      setTimeout(() => {
        collager.open = true;
      }, 10);
    });
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    sheep.$store('app').init();
    setTimeout(function() {
      uni.stopPullDownRefresh();
    }, 800);
  });

  function goToChat(item, type = 'ai') {
    if (mp_code.value == appVersion.value) {
      return;
    }
    console.log();
    if (!isLogin.value) {
      loginPopup._value.openPopup();
      return;
    }
    uni.setStorageSync('chatInfo', JSON.stringify({
      id: item.id,
      type,
      ai_status: item.ai_status == 1 ? 1 : 0,
    }));
    sheep.$router.go('/pages/nc_chat/index');
  }

  function loginConfirm() {
    loginPopup._value.closePopup();
    sheep.$router.go('/pages/login/wechat_login');
  }
</script>

<style lang="scss">
  .avatar_image {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    overflow: hidden;
  }

  .chat_list {
    .list {
      width: 686rpx;
      height: 90rpx;
      background: transparent;
      //border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 5rpx 20rpx 5rpx 20rpx;

      .icon {
        width: 60rpx;
        height: 60rpx;
        position: relative;

        .tips_count {
          position: absolute;
          right: -25rpx;
          top: 15rpx;
          transform: translate(-50%, -50%);
          background: #FF4206;
          border-radius: 50%;
          width: 35rpx;
          height: 35rpx;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 18rpx;
          color: #FFFFFF;
        }
      }

      .name {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 30rpx;
        color: #000000;
      }

      .codes {
        width: 65rpx;
        height: 30rpx;
        background: #FFC440;
        border-radius: 15rpx 15rpx 15rpx 15rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16rpx;
        color: #000000;
      }

      .code {
        width: 540rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 24rpx;
        color: #9F9F9F;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .background_AI {
        width: 66rpx;
        height: 30rpx;
        background: url($uni-bg-url + '/chat_icon_ai.png') no-repeat;
        background-size: 66rpx 30rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16rpx;
        color: #FFFFFF;
      }

      .right {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 20rpx;
        color: #FFFFFF;
      }
    }
  }

  .icon_left {
    width: 55rpx;
    height: 55rpx;
    border-radius: 50%;

    image {
      width: 55rpx;
      height: 55rpx;
    }
  }

  .collapse {
    ::v-deep .uni-collapse {
      background: transparent !important;
    }

    /* #ifdef H5 */
    background: transparent !important;
    /* #endif */
  }

  .collapseItem {
    height: auto !important;
    width: 710rpx;

    ::v-deep .uni-collapse {
      background: transparent;
    }

    ::v-deep .uni-collapse-item {
      width: 100%;
    }

    ::v-deep .uni-collapse-item__title {
      background: #FFFFFF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }

    ::v-deep .uni-collapse-item__wrap {
      background-color: #FFFFFF !important;
    }

    ::v-deep .uni-collapse-item__title-arrow {
      transform: rotate(-90deg) !important;
    }

    ::v-deep .uni-collapse-item__wrap-content {
      border-bottom-color: #FFFFFF !important;
      border-bottom-width: 0 !important;
    }

    ::v-deep .uni-collapse-item__title-arrow-active {
      transform: rotate(0deg) !important;
    }

    ::v-deep .uni-icons {
      color: #000000 !important;
      font-size: 34rpx !important;
    }

    .item_header {
      padding: 12rpx 0 12rpx 23rpx;
      height: 80rpx;

      image {
        width: 60rpx;
        height: 60rpx;
      }

      .right {
        .name {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 30rpx;
          color: #000000;
        }

        .code {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 24rpx;
          color: #9F9F9F;
        }
      }
    }

    .items_content {
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 0 18rpx;

      .list {
        width: 666rpx;
        padding: 18rpx 0;

        .left {
          image {
            width: 58rpx;
            height: 58rpx;
          }

          .top {
            .name {
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 500;
              font-size: 30rpx;
              color: #000000;
            }

            .background_AI {
              width: 66rpx;
              height: 30rpx;
              background: url($uni-bg-url + '/chat_icon_ai.png') no-repeat;
              background-size: 66rpx 30rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 16rpx;
              color: #FFFFFF;
            }
          }

          .bottom {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 20rpx;
            color: #9F9F9F;
          }
        }

        .right {
          image {
            width: 55rpx;
            height: 55rpx;
          }
        }
      }
    }
  }
</style>
